<template>
  <div class="dog_div">
    <img :src="url" alt="" />

    <!-- 2.1 动态style 给标签设置背景颜色 -->
    <!-- 2.1 给文字标签绑定点击事件 当点击是随机改变背景颜色 -->
    <p :style="{ backgroundColor: colorful }" @click="changeFn">
      这是一只活泼可爱的小狗
    </p>
  </div>
</template>

<script>
// 2 .点击文字变色
export default {
  data() {
    //   2.0 定义一个变量
    return {
        
      url:
        "https://img.alicdn.com/imgextra/i1/126556591/O1CN01ygYCZt1yYj2ednYrs_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
      colorful: "",
    };
  },
  methods: {
    changeFn() {
      this.colorful = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
        Math.random() * 255
      )},${Math.floor(Math.random() * 255)})`;
     
    },
  },
};
</script>

<style>
.dog_div {
  width: 300px;
  border: 1px solid #000;
  text-align: center;
  float: left;
}
img {
  width: 100%;
}
</style>